<template>
  <a-row style="padding-left: 15px;padding-right: 15px;background-color: #eeeeee">
    <a-col :span="24" style="margin: 3px;">
      <a-button type="primary" @click="saveAppMenu()" shape="round" style="float: right;margin-right: 15px;">
        保存
      </a-button>
    </a-col>
    <a-col :span="2" style="background-color: #ffffff;height: 90vh;">
      操作区
    </a-col>
    <a-col :span="10" style="background-color: #ffffff;height: 90vh;">
      表单备选
      <div v-for="form in formList" :key="form.id" class="form-list"
           :class="{'form-select' :currentFormId === form.id}">
        <a-row>
          <a-col :span="24" @dblclick="addMenuToRight(form)"
                 style="background-color: #ffffff;cursor: pointer;border-style: dashed ; border-width:1px;padding: 3px;">
            <span style="margin-left: 15px;">{{ form.formName }}</span></a-col>
        </a-row>
      </div>
    </a-col>
    <a-col :span="2" style="height: 90vh;">
      操作区
    </a-col>
    <a-col :span="10" style="background-color: #ffffff;height: 90vh;">
      表单已选
      <div v-for="menu in menuList" :key="menu.id" class="form-list"
           :class="{'form-select' :currentFormId === menu.id}">
        <a-row>
          <a-col :span="24" @dblclick="deleteMenuItem(menu)"
                 style="background-color: #ffffff;cursor: pointer;border-style: dashed ; border-width:1px;padding: 3px;">
            <span style="margin-left: 15px;">{{ menu.name }}</span></a-col>
        </a-row>
      </div>
    </a-col>
  </a-row>
</template>

<script>
import {AppFormApi} from "@/components/home/lowCode/appDef/js/AppFormApi";
import {MenuExtApi} from "@/components/home/lowCode/appDef/js/MenuExtApi";

export default {
  name: "AppMenu",
  data() {
    return {
      formList: [],
      menuList: [],
      appId: '',
      currentFormId: '',
    }
  },
  created() {
    this.appId = this.$route.query.appId;
    MenuExtApi.getAll().then((data) => {
      console.log(data);
    })
    this.loadFormList();
    this.loadAppMenuList();
  },
  methods: {
    loadFormList: function () {
      AppFormApi.getByAppId(this.appId).then((data) => {
        this.formList = data;
      })
    },
    loadAppMenuList() {
      MenuExtApi.getAppMenuList(this.appId).then((data) => {
        this.menuList = data;
      })
    },
    addMenuToRight(form) {
      let createMenus = this.formToMenu(form);
      createMenus = createMenus.filter(item => {
        let unique = true
        this.menuList.forEach(i => {
          if (this.getFormUniqueKey(item) === this.getFormUniqueKey(i)) {
            unique = false;
            this.$message.info(item.name + " 已经存在");
          }
        })
        return unique;
      });
      this.menuList = this.menuList.concat(createMenus);
    },
    getFormUniqueKey(menu) {
      return menu.appMenuType + menu.bindingId + menu.type;
    },
    formToMenu(form) {
      return [{
        name: form.formName + '[新建]',
        appMenuType:1, //
        openType: 'new',
        bindingId: form.id,
        url: '/low_code/form_new',
        type: '1',
        appId: this.appId
      }, {
        name: form.formName + '[列表]',
        appMenuType:1,
        openType: 'self',
        bindingId: form.id,
        url: '/low_code/form_list',
        type: '2',
        appId: this.appId
      }]
    },
    deleteMenuItem(menu) {
      this.menuList = this.menuList.filter(item => item !== menu);
    },
    saveAppMenu() {
      MenuExtApi.saveAppMenu({"appId": this.appId, "menuList": this.menuList}).then(() => {
        this.$message.success("已保存");
        this.sendNotice();
        this.loadAppMenuList();
      });
    },
    sendNotice(){
      localStorage.setItem("refreshMenu",  Math.random().toString())
    }
  }
}
</script>

<style scoped>

</style>
